<!DOCTYPE html>
<html th:replace="layout/layout"
      xmlns:th="http://www.thymeleaf.org">
<title th:fragment="titleName">首页</title>
<style th:fragment="styles">
</style>
<div th:fragment="content">
    <div class="row wrapper border-bottom white-bg page-heading">
        <div class="col-lg-10">
            <h5></h5>
            <ol class="breadcrumb">
                <li class="active">
                    <strong>首页/vue+table</strong>
                </li>
            </ol>
        </div>
    </div>
    <div class="wrapper wrapper-content  animated fadeInRight">
        <div class="row">
            <div class="bs-example" id="table">
                <table class="table table-striped table-bordered table-hover " id="tableList">
                    <thead>
                    <tr>
                        <th>#</th>
                        <th>名称</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="item in listData" v-if="listData.length>0">
                        <th scope="row">{{item.id}}</th>
                        <td>{{item.name}}</td>
                        <td>
                            <button class="btn btn-default" v-on:click="editItem(item.id)">编辑</button>
                            <button class="btn btn-default" v-on:click="deleteItem(item.id)">删除</button>
                        </td>
                    </tr>
                    <tr>
                        <td colspan=3>
                            <div id="pagelist">
                                <div class="row">
                                    <div class="col-lg-6" style="line-height: 80px">
                                        <div class="dataTables_info" id="sample-table-2_info">
                                            第 {{pageData.itemStart}} 到 {{pageData.itemEnd}} 条，共 {{pageData.total}} 条记录。
                                        </div>
                                    </div>
                                    <div class="col-lg-6" style="text-align: right">
                                        <div class="dataTables_paginate paging_bootstrap">
                                            <ul class="pagination">
                                                <li class="prev disabled"
                                                    v-if="pageData.curPage == 1 || pageData.total == 0 || pageData.total == 1">
                                                    <a>首页</a>
                                                </li>
                                                <li class="prev" v-else>
                                                    <a href="javascript:void(0)" rel="external nofollow"
                                                       v-on:click="changeCurPage(1,pageData.pageSize);">
                                                        首页
                                                    </a>
                                                </li>
                                                <li class="prev disabled"
                                                    v-if="pageData.curPage == 1 || pageData.total == 0 || pageData.total == 1">
                                                    <a>上一页</a>
                                                </li>
                                                <li class="prev" v-else>
                                                    <a href="javascript:void(0)" rel="external nofollow"
                                                       v-on:click="changeCurPage(pageData.curPage-1,pageData.pageSize);">
                                                        上一页</i>
                                                    </a>
                                                </li>
                                                <li class="next disabled"
                                                    v-if="pageData.totalPage > 5 && pageData.curPage > 3">
                                                    <a>...</a>
                                                </li>
                                                <template v-for="pageItem in pageData.pageIndex">
                                                    <li class="active" v-if="pageData.curPage == pageItem">
                                                        <a>{{pageItem}}</a>
                                                    </li>
                                                    <li v-else>
                                                        <a href="javascript:void(0)" rel="external nofollow"
                                                           v-on:click="changeCurPage(pageItem,pageData.pageSize);">
                                                            {{pageItem}}
                                                        </a>
                                                    </li>
                                                </template>
                                                <li class="next disabled"
                                                    v-if="pageData.totalPage > 5 && pageData.curPage < pageData.totalPage-2">
                                                    <a>...</a>
                                                </li>
                                                <li class="next disabled"
                                                    v-if="pageData.curPage == pageData.totalPage || pageData.total == 0 || pageData.total == 1">
                                                    <a>下一页</i></a>
                                                </li>
                                                <li class="next" v-else>
                                                    <a href="javascript:void(0)" rel="external nofollow"
                                                       v-on:click="changeCurPage(pageData.curPage+1,pageData.pageSize);">
                                                        下一页</i>
                                                    </a>
                                                </li>
                                                <li class="next disabled"
                                                    v-if="pageData.curPage == pageData.totalPage || pageData.total == 0 || pageData.total == 1">
                                                    <a>末页</a>
                                                </li>
                                                <li class="next" v-else>
                                                    <a href="javascript:void(0)" rel="external nofollow"
                                                       v-on:click="changeCurPage(pageData.totalPage,pageData.pageSize);">
                                                        末页
                                                    </a>
                                                </li>

                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </td>
                    <tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<script th:fragment="scripts" type="text/javascript">

    function getData($page, $pageSize) {//获取数据，可使用各种语言替换^_^
        var $data = [];
        for (var $i = ($page - 1) * $pageSize + 1; $i <= $page * $pageSize; $i++) {
            $data.push({
                id: $i,
                name: 'name' + $i
            });
        }
        var $returnData = {'data': $data, 'total': 103};
        return $returnData;
    }

    var vm = new Vue({
        el: '#table',
        data: {
            listData: [],
            page: 1,//当前页码
            pageSize: 10,//每页条数
            total: 0,//总数
            pageData: {
                curPage: 1,
                pageSize: 10,
                total: 0,
                totalPage: 0,
                pageIndex: [],
                itemStart: 0,
                itemEnd: 0
            }
        },
        methods: {
            listItems: function () {//列出需要的数据
                var returnData = getData(this.page, this.pageSize);
                this.listData = returnData.data;
                this.total = returnData['total'];
                this.setPageList(this.total, this.page, this.pageSize);
            },
            editItem: function ($id) {//编辑操作在这儿哟
                alert('编辑第' + $id + '条数据！');
            },
            deleteItem: function ($id) {//这里可以删除数据
                alert('删除第' + $id + '条数据！');
            },
            setPageList: function (total, page, pageSize) {
                total = parseInt(total);
                var curPage = parseInt(page);
                pageSize = parseInt(pageSize);
                var totalPage = Math.ceil(total / pageSize);
                var itemStart = (curPage - 1) * pageSize + 1;
                if (curPage == totalPage) {
                    itemEnd = total;
                } else {
                    itemEnd = curPage * pageSize;
                }
                var pageIndex = [];
                if (curPage >= 1 && curPage <= totalPage) {
                    if (totalPage < 5) {//5页以内
                        for (var $i = 1; $i <= totalPage; $i++) {
                            pageIndex.push($i);
                        }
                    } else {//大于5页
                        if (curPage == 1) {
                            pageIndex = [curPage, curPage + 1, curPage + 2, curPage + 3, curPage + 4];
                        } else if (curPage == 2) {
                            pageIndex = [curPage - 1, curPage, curPage + 1, curPage + 2, curPage + 3];
                        } else if (curPage == totalPage - 1) {
                            pageIndex = [curPage - 3, curPage - 2, curPage - 1, curPage, totalPage];
                        } else if (curPage == totalPage) {
                            pageIndex = [curPage - 4, curPage - 3, curPage - 2, curPage - 1, curPage];
                        } else {
                            pageIndex = [curPage - 2, curPage - 1, curPage, curPage + 1, curPage + 2];
                        }
                    }
                }

                this.pageData.curPage = curPage;
                this.pageData.pageSize = pageSize;
                this.pageData.total = total;
                this.pageData.totalPage = totalPage;
                this.pageData.pageIndex = pageIndex;
                this.pageData.itemStart = itemStart;
                this.pageData.itemEnd = itemEnd;
            },
            changeCurPage: function (page, pageSize) {//换页
                this.page = page;
                this.pageSize = pageSize;
                this.listItems();
            },
            goPage: function (pageSize, totalPage) {//跳转页
                var pageIndex = this.$refs.goPage.value;
                if (pageIndex <= 0) {
                    pageIndex = 1;
                    this.$refs.goPage.value = 1;
                } else if (pageIndex >= totalPage) {
                    pageIndex = totalPage;
                    this.$refs.goPage.value = totalPage;
                }
                this.changeCurPage(pageIndex, pageSize);
            }
        }
    });

    window.onload = function () {
        console.log('Hello World!');
        vm.listItems();
    };
</script>
</html>